<template>
    <!-- 登录后 系统头部 -->
    <div class="inside-header">
        <div class="left">
            <h1 class="logo">
                <img src="../../assets/login/logo_mini.png" />
                <span>金辰科技产线管理系统</span>
            </h1>
            <Time />
        </div>
        
        <div class="right">
          <span class="fullscreen" @click="toggleFullScreen">
            <i v-if="isFullScreen" class="iconfont icon-fullscreen-exit-fill" ></i>
            <i v-else class="iconfont icon-fullscreen-fill" ></i>
          </span>
          <span class="bell"><i class="iconfont icon-xiaoxi"></i></span>
            <el-dropdown >
                <span class="el-dropdown-link">
                    <span class="avator">
                        <img src="../../assets/vue.svg" />
                    </span>用户姓名<el-icon><CaretBottom /></el-icon></span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="handleAccount">账号信息</el-dropdown-item>
                    <el-dropdown-item @click="handlePassword">密码修改</el-dropdown-item>
                    <el-dropdown-item @click="handleClear">清除缓存</el-dropdown-item>
                    <el-dropdown-item @click="handleChange">切换账号</el-dropdown-item>
                    <el-dropdown-item @click="handleQuit">退出系统</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <!-- 修改密码 -->
    <changePassword 
        :pass-visible="passVisible"
        @close="passVisible = false"
    />
    <!-- 账号信息 -->
     <!-- <addUser
        :visible="userVisible"
         :entry="entry"
         :data="userStore.userData"
         @close="userVisible=false" 
     /> -->
</template>

<script setup>
import { CaretBottom, Bell } from '@element-plus/icons-vue'
import changePassword from './components/changePassword.vue'
import addUser from './components/addUser.vue'
import { ref } from 'vue'
import useUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router'

let passVisible = ref(false)
let userVisible = ref(false)
let entry = ref('edit')
let userStore = useUserStore()
let $router = useRouter()
let isFullScreen = ref(false)

const toggleFullScreen = () => {
  
  if (!document.fullscreenElement) {
    console.log('进入全屏')
    isFullScreen.value = true
    enterFullScreen()
  } else {
    console.log('退出全屏')
    isFullScreen.value = false
    exitFullScreen()
  }
}

const enterFullScreen = () => {
  let element = document.documentElement
  
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) { /* Firefox */
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    element.webkitRequestFullscreen()
  } else if (element.msRequestFullscreen) { /* IE/Edge */
    element.msRequestFullscreen()
  }
}
const  exitFullScreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen()
  }
}
// 账号信息
const handleAccount = () => {
    
}
// 密码修改
const handlePassword = () => {
  passVisible.value = true
}

// 清除缓存
const handleClear = () => {

}
// 切换账号
const handleChange = () => {

}
// 退出登录
const handleQuit = () => {
  $router.push({
    path: '/login'
  })
}

</script>

<style lang="scss" scoped>
.inside-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    background-color: #0040BF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 32px 15px 20px;
    box-sizing: border-box;
    .left {
        display: flex;
        align-items: center;
        .logo {
            margin-right: 30px;
            img {
                width: 30px;
                height: 30px;
                vertical-align: middle;
            }
            span {
                font-size: 18px;
                color: #fff;
                margin-left: 12px;
                vertical-align: middle;
                font-weight: bold;
            }
        }
    }
   
    .right {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        .fullscreen {
          color: #fff;
          margin-right: 30px;
          cursor: pointer;
          .iconfont {
            font-size: 26px;
            opacity: .8;
            // transition: all .3s; 
            &:hover {
              opacity: 1;
            }
          }
         
        }
        .bell {
          color: #fff;
          margin-right: 30px;
          cursor: pointer;
          .iconfont {
            font-size: 28px;
            opacity: .8;
            // transition: all .3s;
            &:hover {
              opacity: 1;
            }
          }
        }
        .avator {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            vertical-align: middle;
            margin-right: 13px;
            width: 30px;
            height: 30px;
            border: 2px solid #e5eeff;
            border-radius: 50%;
            background-color: #6699FF;
            img {
                width: 18px;
                height: 18cqi;
            }
        }
        .el-dropdown {
            color: #fff;
            line-height: 25px;
            cursor: pointer;
            .el-icon {
                margin-left: 4px;
                transform: translateY(2px);
                font-size: 16px;
            }
        }
    }

}
:deep(.el-dropdown-menu__item) {
    padding: 10px 32px;
}
</style>